<!--<div class="teste">
    
</div>
-->
<div data-role="page" id="pageAoVivo">
    <div data-theme="a" data-role="header" data-position="fixed">
       <h2>PhoreApp</h2>
       <div data-role="navbar" data-iconpos="right">
           <ul>
               <li>
                   <a data-theme="" class="ui-btn-active ui-state-persist"> AO VIVO! </a>
               </li>
               <li>
                   <a href="#pageParticipar" data-transition="flow" data-theme=""> PARTICIPAR </a>
               </li>
           </ul>
       </div>
    </div>
    
    <div class="telao" data-role="content">
        
        <? foreach($scraps as $scrap){
            
            if($scrap['Scrap']['type']=='image')
            {
                ?>
                <div class="post">
                    <div class="post_photo">
                        <div class="image"><img src="<?= 'http://'.$phoreApp['url'].'/phoreapp/'.$scrap['Image']['dir'].'/'.$scrap['Image']['filename']; ?>"/></div>
                        <div class="sub">
                            <?= $scrap['Image']['description'];?>
                        </div>
                    </div>
                </div>
                <?
            }
            
            else if($scrap['Scrap']['type']=='video')
            {
                ?>
                <div class="post">
                    <div class="post_photo">
                        <div class="image" style="height: auto;"><video src="<?= 'http://'.$phoreApp['url'].'/phoreapp/'.$scrap['Image']['dir'].'/'.$scrap['Image']['filename']; ?>" style='width: 100%;' autoplay loop muted></video></div>
                        <div class="sub">
                            <?= $scrap['Image']['description'];?>
                        </div>
                    </div>
                </div>
                <?
            }
            
            else
            {
                ?>
                <div class="post">
                    <div class="post_text">
                        <div class="body">
                            <?= $scrap['Message']['description'];?>
                        </div>
                    </div>
                </div>
                <?
            }
            
        }
        ?>
        <!-- Exemplo de post de foto -->
<!--        <div class="post">
            <div class="post_photo">
                <div class="image"><img src="http://nokengo.com/img/_site/macaco.png"></div>
                <div class="sub">
                    Testando um texto de 140 caracteres boladoes para a nokengo boladona e assim continua. Porra, 140 caracteres é caractere pra caralho, brotha
                </div>
            </div>
        </div>-->

        <!-- Exemplo de post de texto -->
<!--        <div class="post">
            <div class="post_text">
                <div class="body">
                    Testando um texto de 140 caracteres boladoes para a nokengo boladona e assim continua. Porra, 140 caracteres é caractere pra caralho, brotha
                </div>
            </div>
        </div>-->
    </div>
</div>

<? echo $this->element('participar');?>
<script>
    
    var id = <?= $last_scrap['Scrap']['id']; ?>;
    
    function novasFotos(id_last)
    {
        $.post("scraps/last", {id_last: id_last},
            function(data) {
            //alert("Data Loaded: " + data);
            //$('.teste').html(data);
            
            if(data.indexOf('^') > 0)
            {
                id = n[1];
                
                alert(id);
            }
            else
            {
                var n=data.split("ß");
                id = n[1];
                username = n[2];
                userid = n[3];
                type = n[4];
                description = n[5];
                argumento = n[6];
                
                if(type=='image')
                {
                    postaFoto(id, username, userid, type, description, argumento);
                }
                else if(type=='video')
                {
                    postaVideo(id, username, userid, type, description, argumento);
                }
                else
                {
                    postaComment(id, username, userid, type, description);
                }
                
            }
            
            $('.teste').html(id);
        });
        window.setTimeout('novasFotos(id)', 2000);
    }
    
    function postaFoto(id, username, userid, type, description, argumento)
    {
         $(".telao").prepend(''+
        '<div class="post" data-id="'+id+'" id="divPic_'+id+'" style="display:none;">'+
            '<div class="post_photo">'+
            '    <div class="image"><img src="'+argumento+'"></div>'+
            '   <div class="sub">'+
            description+
            '    </div>'+
            '</div>'+
        '</div>');


        if($("#divPic_"+id).show('slow')){$('#foto_'+id).fadeIn(1790);}
    }
    
    function postaVideo(id, username, userid, type, description, argumento)
    {
         $(".telao").prepend(''+
        '<div class="post" data-id="'+id+'" id="divPic_'+id+'" style="display:none;">'+
            '<div class="post_photo">'+
            '    <div class="image" style="height: auto;><video src="'+argumento+'" style="width: 100%;" autoplay loop muted></video</div>'+
            '   <div class="sub">'+
            description+
            '    </div>'+
            '</div>'+
        '</div>');


        if($("#divPic_"+id).show('slow')){$('#foto_'+id).fadeIn(1790);}
    }
    
    function postaComment(id,argumento)
    {
         $(".telao").prepend(''+
            '<div class="post" data-id="'+id+'" id="divPic_'+id+'" style="display:none;">'+
                '<div class="post_text">'+
                '    <div class="body">'+description+'</div>'+
                '</div>'+
            '</div>');
            if($("#divPic_"+id).show('slow')){}
    }

    $(document).ready(function()
    {
        window.setTimeout('novasFotos(id)', 2000);
    });
</script>